<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul::before{
            content: '女人:再等我10分钟'
        }

        ul::after{
            content: '男人:打完就来';
        }

        p::first-letter{
            font-size: 30px;
        }

        input::-webkit-input-placeholder{
            color: red;
        }
        /* 火狐内核 -moz- */
        input::-moz-placeholder{
            color: blue;
        }
        /* -ms- IE内核 */
        input::-ms-input-placeholder{
            color: blue;
        }

        /* 当页面内容被选中的时候 */
        ::selection{
            color: green;
            background: red;
        }
    </style>
</head>
<body>
    <!-- 
        1. before/after
            s1::before{ ... } 匹配s1里面的最前面
            s1::after{ ... } 匹配s1里面的最后面

            before/after 一般配合content使用
            真正的作用: 在将来配合 float属性时使用
     -->
    世界上最没用的一句话
    <ul>
        <li>警察:不要跑</li>
        <li>神经病:我没病</li>
        <li>医生:我尽力了</li>
        <li>服务员:菜马上好</li>
    </ul>

    <p>钓鱼要到岛上钓,不到岛上钓不到</p>
    <input type="text" placeholder="your name">
</body>
</html>